<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片列表</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        /* 设置外部ul的样式 */
        /* 设置吧body的背景 */
        .img-list{
            width: 380px;/*高度*/
            height: 300px;/*宽度*/
            overflow: hidden;/*裁剪溢出的内容*/
            margin:50px  auto;
            background-color:#F4F4F4 ;
            /* 使ul在页面中居中 */
            /* 通过外边距控制元素的位置 最后控制块元素 */
        }
        .img-list li{
            margin-bottom: 9px;
        }
        .img-list img {
            width: 100%;
        }
        /* 写样式的时候一定要下重置样式 */
    </style>
</head>
<body>
    <!-- 目前能布局的网页就是竖着的网页 -->
    <!-- 宽度固定 直接放里面就可以了 -->
    <!-- <div>
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt=""> -->
        <!-- 图片是可以点击的 -->
        <!-- 往往img外面可以套一个超链接 -->
    <!-- </div> -->
    <!-- img a 外面套了个li  -->

    <ul class="img.list">
        <li>
            <a href="javascript:;">
                <img src="./练习的截图img/01/1.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./练习的截图img/01/2.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./练习的截图img/01/3.jpg" alt="">
            </a>
        </li>
    </ul>
    <!-- 通过css添加样式 让他更好看 -->
</body>
</html>